<template>
  <div>
    <el-card style="margin-top:30px; height:80px;">
      <bread-crumb />
    </el-card>
    <el-card class="shareContainer">
      <el-tabs v-model="activeName">
        <el-tab-pane label="共享商圈" name="first">
          <el-row type="flex" justify="space-around">
            <el-col>
              店铺名称：<el-input v-model="storeName" placeholder="请输入" style="width:250px" @keyup.enter.native="searchName" />
            </el-col>
            <el-col>
              行业：
              <el-select v-model="value" placeholder="请选择" style="width:300px" @change="search">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col style="margin-top:3px" type="flex">
              <el-button type="primary" size="mini" @click="explore">查询</el-button>
              <el-button type="plain" size="mini" @click="resetData">重置</el-button>
              <el-button type="text" style="margin-left:8px;">展开</el-button>
            </el-col>
          </el-row>
          <!-- 提示信息 -->
          <el-tag class="el-icon-info" style="margin-top:50px; margin-bottom:20px; width:100%;">     审核店铺，店铺审核通过之后，店铺既可在线上上线运营，品台将正式开始对店铺进行管理</el-tag>
          <!-- 表格区域 -->
          <el-table
            :data="shareStoretableData"
            style="width: 100%"
          >
            <el-table-column
              prop="hobby"
              label="店铺摆好"
              width="80"
            />
            <el-table-column
              prop="shopName"
              label="店铺名称"
              width="80"
            />
            <el-table-column
              prop="hangye"
              label="店铺行业"
            />
            <el-table-column
              prop="address"
              label="店铺地址"
            />
            <el-table-column
              prop="phone"
              label="联系电话"
            />
            <el-table-column
              prop="id"
              label="推广人ID"
            />
            <el-table-column
              prop="jibie"
              label="权益级别"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.jibie === 1">失败 </span>
                <span v-else-if="scope.row.jibie === 2">未开始 </span>
                <span v-else-if="scope.row.jibie === 3">进行中 </span>
                <span v-else>成功 </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="saleCount"
              label="销售额"
            />
            <el-table-column
              label="操作"
              width="160"
            >
              <template slot-scope="">
                <el-button type="text" style="margin-left:8px;" size="mini">详情</el-button>
                <el-button type="text" style="margin-left:8px;" size="mini" @click="chakanDetail">查看商品</el-button>
                <el-button type="text" style="margin-left:8px;" size="mini" @click="showShareDrawer">经营分析</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-pagination
            :current-page="page.page"
            :page-sizes="[20, 40, 80, 100]"
            :page-size="page.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            style="margin-top:15px; float:right;"
            @size-change="handleShareSizeChange"
            @current-change="handleShareCurrentChange"
          />

          <!-- 提示信息 -->
          <div style="margin-top:15px;">共{{ page.total }}条记录 第1/80页</div>

          <!-- 店铺消费情况分析抽屉 -->
          <share-drawer :show-table.sync="showTable" :show-right="showRight" />
        </el-tab-pane>
        <el-tab-pane label="个人商圈" name="second">
          <el-row type="flex" justify="space-around" style="margin-bottom:20px;">
            <el-col>
              用户名称：<el-input v-model="searchPersonelName" placeholder="请输入内容" style="width:250px" @keyup.enter.native="personelSeach" />
            </el-col>
            <el-col>
              日期：
              <el-date-picker
                v-model="value1"
                type="date"
                placeholder="选择日期"
              />
            </el-col>
            <el-col style="margin-top:3px" type="flex">
              <el-button type="primary" size="mini" @click="explorePersonel">查询</el-button>
              <el-button type="plain" size="mini" @click="resetPersonelData">重置</el-button>
              <el-button type="text" style="margin-left:8px;">展开</el-button>
            </el-col>
          </el-row>

          <!-- 按钮 -->
          <el-button type="primary" icon="el-icon-plus" size="small" @click="showNewDialog">新增</el-button>
          <el-button type="primary" size="small" @click="showStoreCountTable=true">商铺统计</el-button>

          <!-- 提示信息 -->
          <el-tag class="el-icon-info" style="margin-top:20px; margin-bottom:20px; width:100%;"> 已选择 4 项   消费总计：36.4 万   清空</el-tag>

          <!-- 表格区域 -->
          <el-table
            :data="personelStoreData"
            style="width: 100%"
          >
            <el-table-column
              prop="username"
              label="用户名称"
              width="80"
            />
            <el-table-column
              prop="phone"
              label="联系电话"
              width="80"
            />
            <el-table-column
              prop="phone"
              label="商圈店铺数量"
              width="180"
            />
            <el-table-column
              prop="orderCount"
              label="订单数量"
            />
            <el-table-column
              prop="saleCount"
              label="消费额"
            />
            <el-table-column
              prop="pinci"
              label="消费频次"
            />
            <el-table-column
              label="操作"
              width="160"
            >
              <template slot-scope="scope">
                <el-button type="text" style="margin-left:8px;" size="mini" @click="delMystore(scope.row.id)">删除</el-button>
                <el-button type="text" style="margin-left:8px;" size="mini" @click="showPersonelShareDrawer(scope.row.username)">消费分析</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页组件 -->
          <el-pagination
            :current-page="myPage.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="myPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            style="margin-top:15px; float:right;"
            @size-change="handleMyStoreSizeChange"
            @current-change="handleMyStoreCurrentChange"
          />
          <!-- 分页提示信息 -->
          <div style="margin-top:15px;">共400条记录 第1/80页</div>
        </el-tab-pane>
        <!-- 个人商圈消费分析抽屉 -->
        <share-drawer :show-table.sync="showTable" :show-right="showRight" :persone-storel-info="personeStorelInfo" :show-date-table="showDateTable" />
        <!-- 新建对话框 -->
        <new-construct :show-new-contruct-dialog.sync="showNewContructDialog" @addmyStore="add" />
        <!-- 商铺统计抽屉组件 -->
        <store-countdrawer :show-store-count-table.sync="showStoreCountTable" />
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { shareStoreLists, sharePage, myStore, myStorePage, delMystore, addMystore, searchName, searchHangye, searchPersonelName } from '@/api/shareStore.js';
// 导入面包屑导航组件
import BreadCrumb from '@/components/Breadcrumb/index.vue';
// 导入抽屉组件
import ShareDrawer from './components/ShareDrawer';
// 导入新建组件
import NewConstruct from './components/newConstruct';
// 导入商铺统计抽屉组件
import StoreCountdrawer from './components/StoreCountdrawer';
export default {
  components: {
    BreadCrumb,
    NewConstruct,
    ShareDrawer,
    StoreCountdrawer,
  },
  data() {
    return {
      // 个人搜索输入框数据
      searchPersonelName: '',
      // 共享搜索输入框数据
      storeName: '',
      activeName: 'first',
      // 表格数据
      shareStoretableData: [],
      // 共享商圈分页组件
      page: {
        page: 1,
        size: 10,
        total: 0,
      },
      // 下拉选择行业数据
      options: [],
      value: '',
      // 店铺经营分析抽屉
      showTable: false,
      showRight: true,
      showDateTable: false,
      // 个人商圈抽屉id
      personeStorelInfo: [],
      // 店铺详情抽屉
      // table: false,
      // dialog: false,
      // loading: false,
      // 店铺统计抽屉
      showStoreCountTable: false,
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
      }],

      // 个人商圈表格数据
      personelStoreData: [],

      // 个人商圈
      myPage: {
        page: 1,
        size: 10,
        total: 0,
      },

      // 个人商圈日期组件
      value1: '',
      // 控制新建组件的显示和隐藏
      showNewContructDialog: false,
    };
  },
  created() {
    this.shareStoreLists();
    this.sharePage();
    this.myStore();
    this.myStorePage();
  },
  methods: {
    // 获取共享商圈数据
    async shareStoreLists() {
      const { data } = await shareStoreLists();
      // console.log(data);
      // this.shareStoretableData = data;
      this.page.total = data.length;
    },
    async sharePage() {
      const { data } = await sharePage({
        _page: this.page.page,
        _limit: this.page.size,
      });
      this.shareStoretableData = data;
      data.forEach(item => {
        const name = {};
        name.value = item.id;
        name.label = item.hangye;
        this.options.push(name);
      });
    },
    chakanDetail() {
      this.$router.push('/example/tree');
    },
    // 处理共享商圈的每页显示多少条
    handleShareSizeChange(newPageSize) {
      this.page.size = newPageSize;
      this.sharePage();
    },
    // 处理共享商圈当前显示第几页
    handleShareCurrentChange(currntPage) {
      // console.log(currntPage);
      this.page.page = currntPage;
      this.sharePage();
    },

    // 获取个人商圈的资料
    async myStore() {
      const { data } = await myStore();
      this.myPage.total = data.length;
      // console.log(data);
    },

    // 获取个人商圈分页
    async myStorePage() {
      const { data } = await myStorePage({
        _page: this.myPage.page,
        _limit: this.myPage.size,
      });
      this.personelStoreData = data;
    },

    // 处理个人商圈当前显示第几页
    handleMyStoreCurrentChange(newCurrentPage) {
      this.myPage.page = newCurrentPage;
      this.myStorePage();
    },

    // 处理个人商圈每页显示多少条
    handleMyStoreSizeChange(newPageSize) {
      this.myPage.size = newPageSize;
      // console.log(this.myPage.size);
      this.myStorePage();
    },
    // 弹出个人商圈新建对话框
    showNewDialog() {
      this.showNewContructDialog = true;
    },
    // 删除个人商圈的信息
    async delMystore(id) {
      // console.log(id);
      await delMystore(id);
      this.myStorePage();
      this.$message.warning('删除成功！');
    },
    // 增加个人商圈
    async add(data) {
      await addMystore(data);
      this.myStorePage();
      this.$message.success('新增成功！');
    },
    // 根据行业搜索
    async search(id) {
      const value = this.options.find(item => {
        return item.value === id;
      });
      // console.log(value.label);
      const { data } = await searchHangye(value.label);
      this.shareStoretableData = data;
    },

    // 根据店铺名字搜索
    async searchName() {
      const { data } = await searchName(this.storeName);
      console.log(this.storeName);
      console.log(data);
      this.shareStoretableData = data;
    },

    // 重置共享商圈数据
    async resetData() {
      const { data } = await shareStoreLists();
      this.shareStoretableData = data;
    },

    // 共享商圈查询
    explore() {
      if (this.storeName !== '') {
        this.searchName();
      } else {
        this.$message.warning('请输入要搜索的内容！');
      }
    },

    // 个人商圈搜索
    async personelSeach() {
      const { data } = await searchPersonelName(this.searchPersonelName);
      this.personelStoreData = data;
    },

    // 共享商圈查询
    explorePersonel() {
      if (this.searchPersonelName !== '') {
        this.personelSeach();
      } else {
        this.$message.warning('请输入要搜索的内容！');
      }
    },

    // 重置个人商圈数据
    async resetPersonelData() {
      const { data } = await myStore();
      this.personelStoreData = data;
    },
    // 处理个人商圈消费分析的抽屉的显示和隐藏
    async showPersonelShareDrawer(username) {
      this.showTable = true;
      this.showRight = false;
      this.showDateTable = true;
      const { data } = await searchPersonelName(username);
      // console.log(data);
      this.personeStorelInfo = data;
    },
    // 处理共享商圈经营分析的抽屉的显示和隐藏
    showShareDrawer() {
      this.showTable = true;
    },
  },
};
</script>

<style lang="scss">
.shareContainer {
  margin: 40px auto;
  .dateChoose {
    margin-left: 345px;
  }
}
</style>
